<template>
	<view>
		<u-navbar  :is-back="true"  back-icon-color="#ffffff" :border-bottom="false"
				   title="AI绘画" title-color="#ffffff" title-bold  :title-size="34"
				  :background="{backgroundColor:'none'}">
			<view slot="right" class="u-m-r-30">
				<view @click="clear(null)">
					<u-icon name="reload" size="50" color="#ffffff"></u-icon>
				</view>
			</view>
		</u-navbar>
		
		<view class="u-p-30">
			<view v-if="createStatus!=-1">
				<view style="text-align: left;"  class="u-p-20">
					<text>
						请用一段话描述一下您要生成的图片
					</text>
				</view>
				<view>
					<view class="u-p-20">
						<u-input type="textarea" 
							  :custom-style="{color:'#ffffff'}"
							 v-model="formData.question"  :height="300"  :maxlength="500"	
							 border placeholder="请输入你要生成的图片文本描述">
						</u-input>
					</view>
				</view>
			</view>
			<view v-else>
				<view style="text-align: center;"  class="u-p-20">
					<text>
						积分不足!
					</text>
				</view>
			</view>
			<view class="u-p-20">
				<u-button type="success" @click="submitCreateImage()"  
				:disabled="formData.question.length<1">立即生成</u-button>
			</view>
			
			<view v-if="taskList.length>0" class="u-p-20">
				<view class="u-font-32 u-m-b-20">
					<text>任务列表</text>
				</view>
				<scroll-view :scroll-x="false" :scroll-y="true" 
							:style="'height:'+scrollViewHeight+'px;'">
					<u-cell-group>
						<u-cell-item  v-for="(task,index) in taskList"  :key="index" 
									  @click="getTaskDetail(task,index)"
									 :title="task.TextPrompt" 
									 :value="formatStatus(task)" 
									 :label="task.CreateTime.substring(0,10)">
						</u-cell-item>
					</u-cell-group>		
				</scroll-view>
			</view>
			<view v-else>
				<view v-if="creating" class="u-flex u-row-center u-col-center">
					<view>
						<u-loading mode="circle" :size="64" color="#000000"></u-loading>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup v-model="imageShowFlag"  mode="bottom"  border-radius="14" length="90%">
			<view class="" style="padding-top: 200rpx;">
				<view  class="u-p-30">
					<view class="u-flex u-row-center u-col-center" style="width: 100%;">
						<view>
							<u-image :src="currentImagePath" width="600rpx" height="600rpx" border-radius="12"></u-image>
						</view>
					</view>
					<view class="u-flex u-row-around u-col-center u-m-t-30"  style="width: 100%;">
						<view>
							<u-icon name="share-fill" color="#19be6b" size="50"
									 label-pos="bottom"	
									 label="分享"></u-icon>
						</view>
						<view>
							<u-icon name="photo-fill" color="#2979ff" size="50"
									 label-pos="bottom"	
									 label="保存"></u-icon>
						</view>
					</view>
				</view>
				<view style="position: absolute;bottom: 80rpx;width: 100%;padding:30rpx 80rpx;">
					<u-button @click="closePop()">关闭</u-button>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	import AICreateImage from '@/util/AI/text-to-image.js';
	export default {
		data() {
			return {
				formData:{
					question:'',
					width:1024,
					height:1024,
					number:1,
				},
				taskList:[],
				creating:false,
				createStatus:0,
				scrollViewHeight:300,
				imageShowFlag:false,
				currentImagePath:'',
			};
		},
		created:function(){
			this.scrollViewHeight=this.$u.sys().windowHeight*0.45;	
		},
		onUnload:function(){
			let that=this;
			if(that.taskList.length>0){
				let key="AI-Task-LIST-"+that.vuex_userInfo.id;
				uni.setStorageSync(key,JSON.stringify(that.taskList));
			}
		},
		
		onLoad:function(){
			let that=this;
			let key="AI-Task-LIST-"+that.vuex_userInfo.id;
			let taskStr= uni.getStorageSync(key);
			if(taskStr){
				that.taskList=JSON.parse(taskStr);
			}
		},
		
		methods:{
			clear:function(){
				this.images=[];
				this.formData.question="";
			},
			submitCreateImage:function(){
				let that=this;
				that.creating=true;
				AICreateImage.putTask(that.formData.question,{
					success:function(res){
						console.log("绘画结果",res);
						let resultStatus= res.status;
						that.formData.question="";
						if(resultStatus==0){
							let data= res.data;
							let uuid=data.Uuid;
							let prompt=data.TextPrompt;
							that.taskList.push(data);
							that.creating=false;
							if(that.taskList.length>0){
								let key="AI-Task-LIST-"+that.vuex_userInfo.id;
								uni.setStorageSync(key,JSON.stringify(that.taskList));
							}
						}else{
							that.globalUtil.utilAlert(res.reason);
							that.createStatus=resultStatus;
							that.creating=false;
							return;
						}
					}
				});
			},
			getTaskDetail:function(task,index){
				let that=this;
				//0 表示排队中, 1 表示已经完成,  2表示运行中  3 超时退款  4.用户主动取消
				let taskStatus=task.Status;
				if(taskStatus==0||taskStatus==2){
					AICreateImage.getTaskDetail(task.Uuid,{
						success:function(res){
							console.log("绘画任务详情结果",res);
							let resultStatus= res.status;
							if(resultStatus==0){
								let data= res.data;
								that.taskList[index]=data;
								let status=data.Status;
								that.$forceUpdate();
								if(status==1){
									that.currentImagePath=data.ImagePath;
									that.imageShowFlag=true;
								}else{
									that.globalUtil.utilAlert("任务进行中,稍后查看");
									return;
								}
							}
						},
						fail:function(res){
							
						},
						complete:function(){
							
						}
					})
				}
				if(taskStatus==1){
					this.currentImagePath=task.ImagePath;
					this.imageShowFlag=true;
				}
			},
			formatStatus:function(task){
				let taskStatus=task.Status;
				//console.log("=====taskStatus====",taskStatus);
				//0 表示排队中, 1 表示已经完成,  2表示运行中  3 超时退款  4.用户主动取消
				switch (taskStatus){
					case 0:
						return "排队中";
					case 1:
						return "已完成";
					case 2:
						return "运行中 ";
					case 3:
						return "超时退款";	
					case 4:
						return "用户主动取消";			
					default:
						return "未知异常";		
				}
			},
			closePop:function(){
				this.imageShowFlag=false;
				this.currentImagePath="";
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ai-image{
		position: fixed;
		width:100rpx;
		height:100rpx;
		right:10rpx;
		background-color: #19be6b;
		border-radius: 50rpx;
		text-align: center;
	}
</style>
<style>
	page{
		background-image: url("/static/image/page-bg.png");
		width: 100%;
		height: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		color: #fff;
	}
</style>
